<template>
    <div>
        <template v-for="(item,index) in myPointList" v-move :ind='index'>
            <el-popover placement="top-start" :ref='"popoverRef"+item.deviceId' title="设备详情" :key="item.deviceId"
                effect="dark" width="200" trigger="click">
                <div>设备名称：{{item.deviceName}}</div>
                <div>设备状态：{{item.connectionState?'离线' : '在线'}}</div>
                <div v-if="devSystem == 2">是否打开：{{item.isOpen?'打开' : '关闭'}}</div>
                <div>
                    操作：
                    <el-tag class="myTag" v-if="$route.path == '/iot_device_2d'" size="mini" type="danger"
                        @click="del(item)">删除
                    </el-tag>
                    <el-tag class="myTag" v-if="$route.path == '/iot_device_2d'&& !item.isUpdate" size="mini"
                        type="warning" @click="edit(item,index)">修改
                    </el-tag>
                    <el-tag class="myTag" v-if="$route.path == '/iot_device_2d'&& item.isUpdate" size="mini"
                        type="primary" @click="save(item,index)">保存
                    </el-tag>
                    <el-tag class="myTag" v-if="$route.path != '/iot_device_2d'" size="mini" type="warning"
                        @click="particulars(item,index)">详情
                    </el-tag>
                    <!--<el-tag v-show="$route.path == '/iot_acs' && !item.isOpen" size="mini" type="success"
                        @click="openDoor(item)">开门</el-tag>
                    <el-tag v-show="$route.path == '/iot_acs' && item.isOpen" size="mini" type="info"
                        @click="closeDoor(item)">关门</el-tag>
                      <el-tag v-show="$route.path == '/iot_video_monitor'" size="mini" type="success"
                        @click="playVideo(item)">播放</el-tag> -->
                </div>
                <span v-drag="item" slot="reference" :class="{
                    'pointImg':true,
                    'defaultImg':true,
                    }" :style="{
                    position:'absolute',
                    left:item.x+'px',
                    top:item.y+'px',
                    backgroundImage:`url(${item.pictureUrl})`,
                    backgroundSize: `100px`,
                    zIndex:9999,
                }"></span>
            </el-popover>
        </template>
        <div>
            <inBody>
                <el-dialog :title="videoInfo.channelName" :visible.sync="dialogVisible" width="60%"
                    :before-close="handleClose">
                    <video id="my_video" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid"
                        data-setup="{}" controls muted autoplay="true" preload="../assets/images/play.png">
                        <source :src="videoInfo.src" type="application/x-mpegURL" />
                    </video>
                </el-dialog>
            </inBody>
        </div>
        <div>
            <inBody>
                <el-dialog class="tanchuang" :title="devicedata.deviceName" center :visible.sync="dialogDevice"
                    :before-close="jiankongClose" :modal=false width="50%">
                    <!-- :before-close="handleClose" -->
                    <el-tabs class="tabsbox" v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="设备监控" name="first">
                            <div class="shuxing">
                                <!-- 视频监控系统 -->
                                <iotvscsplayer style="width: 900px; height: 500px;" v-if="devicedata.subsystem == 'iot_vscs'" :url="devicedata.extra"
                                    :biaoshi="videoplayingstatus" :dialogVisible="dialogDevice"></iotvscsplayer>
                                <!-- 门禁系统 -->
                                <iotAcsCard v-else-if="devicedata.subsystem == 'iot_acs'" :devicedata="devicedata">
                                </iotAcsCard>
                                <iotCisCard v-else-if="devicedata.subsystem == 'iot_cis'" :devicedata="devicedata">
                                </iotCisCard>
                                <!-- 报警系统 -->
                                <iotIpsCard v-else-if="devicedata.subsystem == 'iot_ips'" :devicedata="devicedata">
                                </iotIpsCard>
                                <!-- 广播系统 -->
                                <iotdmbcard v-else-if="devicedata.subsystem == 'iot_dmb'" :devicedata="devicedata" :dialogVisible="dialogDevice">
                                </iotdmbcard>
                                <propertyInfo
                                    v-else-if="devicedata.modelId!=7 && devicedata.modelId!=9 && devicedata.subsystem != 'iot_vscs' && devicedata.subsystem !='iot_acs'"
                                    :devicedata="devicedata"></propertyInfo>
                            </div>
                        </el-tab-pane>
                        <!-- <el-tab-pane label="维修记录" name="second">
                            <deviceInfo :devicedata="devicedata"></deviceInfo>
                        </el-tab-pane>
                        <el-tab-pane label="保养记录" name="third">
                            <maintainInfo @handleCurrentPage="handleCurrentPage" :maintainData="devicedatathird"
                                :total="total">
                            </maintainInfo>
                        </el-tab-pane> -->
                        <!-- <el-tab-pane label="报警记录" name="fourthly">
                            <alarmInfo @handleCurrentPage="handleCurrentPage" :devicedata="devicedatafourthly"
                                :total="total"></alarmInfo>
                        </el-tab-pane> -->
                        <el-tab-pane label="开门记录" name="fifth" v-if="devicedata.subsystem == 'iot_acs'">
                            <iotacslist ref="iotacslist" :devicedata="devicedata" :dialogDevice="dialogDevice"></iotacslist>
                        </el-tab-pane>
                        <el-tab-pane label="开门记录" name="fifth" v-if="devicedata.subsystem == 'iot_cis' ">
                            <iotcislist2 ref="iotacslist" :devicedata="devicedata" :dialogDevice="dialogDevice"></iotcislist2>
                        </el-tab-pane>
                        <el-tab-pane label="故障记录" name="sixth" v-if="devicedata.subsystem == 'iot_acs' ">
                            <iotcislist ref="iotcislist" :devicedata="devicedata" :dialogDevice="dialogDevice"></iotcislist>
                        </el-tab-pane>
                        <el-tab-pane label="报警记录" name="state" v-if="devicedata.subsystem == 'iot_acs' ">
                            <senselist ref="senselist" :devicedata="devicedata" :dialogDevice="dialogDevice"></senselist>
                        </el-tab-pane>
                        <el-tab-pane label="操作记录" name="action" v-if="devicedata.subsystem == 'iot_sense' ">
                            <senselist2 ref="senselist2" :devicedata="devicedata" :dialogDevice="dialogDevice"></senselist2>
                        </el-tab-pane>
                    </el-tabs>
                </el-dialog>
            </inBody>
        </div>
    </div>
</template>

<script>
    // import {handleAkxDoor,commandwrite } from '../url/api';
    import { commandread, commandwrite, eventDevice, getDevicePlanDetails,getTerminals,getTerminalsmsg,getTerminalsstate} from '../../url/api';
    import videojs from 'video.js';
    import propertyInfo from '../jf_modules/property_info.vue';
    import deviceInfo from '../jf_modules/device_info.vue';
    import maintainInfo from '../jf_modules/maintain_info.vue';
    import alarmInfo from '../jf_modules/alarm_info.vue';
    import player from '../extraOptions/player';
    import iotvscsplayer from './iot_vscs_player.vue';
    import iotAcsCard from './system_card_style/iot_acs_card.vue';//门禁系统
    import iotCisCard from './system_card_style/iot_cis_card.vue';
    import iotIpsCard from './system_card_style/iot_ips_card.vue';//报警系统
    import iotacslist from './dialog_lists/iot_acs_list.vue';
    import iotcislist from './dialog_lists/iot_cis_list .vue';
    import iotcislist2 from './dialog_lists/iot_cis_list2.vue';
    import senselist from './dialog_lists/iot_sense_list.vue';
    import senselist2 from './dialog_lists/iot_sense_list2.vue';
    import iotdmbcard from './system_card_style/iot_dmb_card.vue';
    export default {
        props: [
            'pointList',
            'deviceSys',
            'systemItemType',
            'imgW',
            'imgH',
            'zoom',
            // 'closeCamera',
        ],
        data() {
            return {
                total: 0,
                thirdSearch: {
                    current: 1,
                    size: 10,
                },
                fourthlySearch: {
                    page: {
                        current: 1,
                        size: 10,
                    },
                },
                videoInfo: { src: '', channelName: '' },
                dialogVisible: false,
                dialogDevice: false,
                devSystem: 1,
                activeName: 'first',
                arr: [
                    {
                        id: 34,
                        systemType: '监控',
                        deviceName: 'A1-1F分控制室',
                        deviceId: '1000034_0',
                        deviceType: '大华',
                        x: 877.6666666667,
                        y: 644.6666666667,
                        deleted: 1,
                        spaceType: null,
                        isOnline: 1,
                        isOpen: null,
                        spaceId: 513,
                        creator: 201,
                        gmtCreate: 1649407434000,
                        updator: 201,
                        xqId: 148,
                        gmtModified: 1650003785000,
                    },
                ],
                activeUrl: require('../../assets/images/iot_svg/defaultDev.png'),
                stringActiveUrl: require('../../assets/images/iot_svg/defaultDev.png'),
                myPointList: [],
                devicedata: {},
                devicedatafourthly: {},
                devicedatathird: {},
                maintainData: {},
                videoplayingstatus: false,
                timer: '',
                ReadData: '',
                fifthValue:'',
                sixthValue:'',
                stateValue:'',
                actionValue:'',
                editX:0,
                editY:0,
            };
        },
        watch: {
            pointList(val) {
                this.myPointList = val;
                console.log("hahahahahahha啊打发撒旦顶顶顶顶顶顶顶顶顶顶顶顶", this.myPointList);
                this.myPointList = this.myPointList.map((item) => {
                    item.isUpdate = false;
                    item.pictureUrl = require('../../assets/iotImg/' + item.subsystem + '.png');// require();
                    return item;
                });
            },
            closeCamera(val) {
                if (!val) {
                    this.$emit('getCameraInfo', {
                        dialogVisible: val,
                    });
                    this.dialogVisible = val;
                }
            },
            deviceSys(val) {
                if (this.$route.path == '/iot_device_2d') {
                    console.log('deviceSys.................................', val);
                    // this.activeUrl = require(`../../assets/images/iot_svg/${val}.svg`);
                }
                if (val) {
                    this.devSystem = val;
                }
            },
            systemItemType(val) {
                if (val) this.devSystem = val;
                console.log(this.devSystem, "AAAAAAAAAAAAAAAAQQQQQQQ");
            },
            dialogDevice(val){
                if(val){
                    console.log('关掉了');
                }
            }
        },
        methods: {
            handleCurrentPage(val) {
                console.log("XXXXXXXXXXXXXXXXXXXXX", val);
                if (this.activeName == 'fourthly') {
                    this.fourthlySearch.page.current = val;
                    this.getEventDevice();
                } else if (this.activeName == 'third') {
                    this.thirdSearch.current = val;
                    this.getDevicePlanDetails();
                }
            },
            openPopoverRef(deviceId) {
                let popoverRef = "popoverRef" + deviceId;
                

                setTimeout(() => {
                    this.$nextTick(() => {
                        
                        console.log(this.$refs[popoverRef], "成功");
                        this.$refs[popoverRef][0].doShow();
                    });
                }, 300);


            },
            getEventDevice() {

                console.log(this.devicedata, "AAAAAAAAAAA");
                let params = {
                    deviceId: this.devicedata.deviceId,
                    subsystemCode: this.devicedata.subsystem,
                    page: this.fourthlySearch.page
                }
                eventDevice(params).then(res => {
                    console.log(res);
                    if (res.data.ok) {
                        this.devicedatafourthly = res.data.data.records.filter(item => {
                            if (item.createTime) {
                                item.createTime = this.$root.getDateArray(item.createTime)[9];
                            }
                            return item;
                        });
                        this.total = res.data.data.total;
                    } else {
                        this.$message(res.data.msg);
                    }
                });
            },
            jiankongClose() {
                if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                    clearInterval(this.timer); //关闭
                    console.log("关闭弹窗关闭定时器");
                }
                this.dialogDevice = false;
                this.videoplayingstatus = this.dialogDevice;
                this.activeName = 'first'
                
            },
            handleClick(tab, event) {
                // 
                console.log(tab, event);
                if (this.ReadData.subsystem == "iot_acs") {
                    console.log("门禁系统");
                    if (tab.name == 'fifth') {
                    this.$refs.iotacslist.fifthValue = true
                    }else{
                    this.$refs.iotacslist.fifthValue = false
                    }
                } else if (this.ReadData.subsystem == "iot_cis") {
                    console.log("对讲系统");
                    if (tab.name == 'sixth') {
                    this.$refs.iotcislist.sixthValue = true
                    }else{
                    this.$refs.iotcislist.sixthValue = false
                    }
                }else if (this.ReadData.subsystem == "iot_sense") {
                    console.log("烟感系统",tab.name);
                    if (tab.name == 'state') {
                    this.$refs.senselist.stateValue = true
                    }else{
                    this.$refs.senselist.stateValue = false
                    }
                    if(tab.name == 'action'){
                    this.$refs.senselist2.actionValue = true
                    }else{
                    this.$refs.senselist2.actionValue = false
                    }
                } else if (this.ReadData.subsystem == "iot_vscs") {
                    console.log("监控系统");
                } else if (this.ReadData.subsystem == "iot_ips") {//报警系统
                    console.log("报警系统");
                    console.log(this.devicedata, "AAAAAAAAAAA");
                } else {
                    if (tab.name != 'first') {
                        if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                            clearInterval(this.timer); //关闭
                            console.log("2先关闭定时器");
                        }
                    } else {
                        if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                            clearInterval(this.timer); //关闭
                            console.log("1关闭原有定时器");
                        }
                        this.timer = window.setInterval(() => {
                            setTimeout(() => {
                                this.ReadCommand(this.ReadData);
                            }, 0);
                        }, 4000)
                    }
                }
                // 
                // if (tab.name == 'fourthly') {
                //     this.getEventDevice();
                // } else if (tab.name == 'third') {
                //     this.getDevicePlanDetails();
                // }

            },
            getDevicePlanDetails() {

                let params = {
                    deviceId: this.ReadData.deviceId,
                    current: this.thirdSearch.current,
                    size: this.thirdSearch.size,
                }
                getDevicePlanDetails(params).then(res => {
                    console.log(res);
                    if (res.data.ok) {
                        this.devicedatathird = res.data.data.records.filter(item => {
                            if (item.patrolTimeDTOS) {
                                item.stime = getDateArray(item.patrolTimeDTOS[0].executionStartTime)[9]
                                item.etime = getDateArray(item.patrolTimeDTOS[0].executionEndTime)[9]
                                item.timeout = item.patrolTimeDTOS[0].timeout
                            }
                            if (item.inspectorsName) {
                                let ryarry = []

                                item.inspectorsName.forEach(val => {
                                    ryarry.push(val.name)
                                    item.ryids = val.id
                                })
                                if (ryarry.length > 2) {
                                    item.ywrydata = ryarry.join('、')
                                    item.yunweirenyuan = ryarry[0] + '、' + ryarry[1] + ' . . .'

                                } else {
                                    item.yunweirenyuan = ryarry.join('、')
                                    item.ywrydata = ryarry.join('、')
                                }

                                //item.yunweirenyuan = item.inspectorsName.name.join(',')
                            }
                            return item;
                        });
                        this.total = res.data.data.total;
                    } else {
                        this.$message(res.data.message);
                    }
                })

            },
            ReadCommand(data) {
                // new Promise((resolve, reject) => {
                // if (data) {
                //     let params = [data];
                //     commandread(params).then((res) => {
                //         if (res.data.ok) {
                //             this.devicedata = res.data.data[0]
                //             // console.log("QQQQQQQQ",this.devicedata,"实时更新点位数据");
                //         }
                //     });
                // }
            },
            particulars(val, index) {
                console.log('点123213',val);                    
                this.devicedata = val;
                this.ReadData = val;
                console.log(this.ReadData, "读数据");
                let timedtask = true;//默认打开详情开始定时读数据任务，部分系统不需要（监控系统，门禁系统）
                
                if (val.subsystem == "iot_vscs") {//视频监控系统

                    this.videoplayingstatus = true;
                    timedtask = false
                } else if (val.subsystem == "iot_acs") {//门禁系统
                    timedtask = false
                }else if (val.subsystem == "iot_cis") {//门禁系统
                    timedtask = false
                } else if (val.subsystem == "iot_ips") {//报警系统
                    timedtask = false
                } else if (val.subsystem == "iot_dmb") {//广播系统
                    timedtask = false
                    

                } else {
                    this.ReadCommand(val);
                }
                if (this.activeName == "first" && timedtask == true) {
                    this.timer = window.setInterval(() => {
                        setTimeout(() => {
                            this.ReadCommand(this.ReadData)
                        }, 0);
                    }, 4000)
                }
                this.dialogDevice = true      
            },
            edit(val, index) {
                val.isUpdate = true;
                console.log(val.isUpdate);
                this.$forceUpdate();
            },
            save(val, index) {
                val.isUpdate = false;
                if(this.editX == 0 && this.editY ==0){
                    this.$message({
                    message: '坐标未修改',
                    type: 'warning',
                });
                this.$forceUpdate();
                }else{
                    this.$emit('getNewpoint', { editX: this.editX, editY: this.editY,deviceName:val.deviceName});
                    this.$message({
                        message: '已修暂存坐标，请保存绑点',
                        type: 'success',
                    });
                }
                
                // this.$forceUpdate();
            },
            playVideo(row) {
                if (!row.isOnline) {
                    this.$message.warning('设备已离线');
                    return;
                }
                this.dialogVisible = true;
                let info = row.deviceId.split('_');
                this.videoInfo.src = `http://10.201.2.8:7086/live/cameraid/${info[0]}%24${info[1]}/substream/1.m3u8`;
                this.videoInfo.channelName = row.deviceName;
                this.myPlay(this.videoInfo.src);
                // this.$emit('getCameraInfo',{
                //     deviceName:row.deviceName,
                //     src:this.videoInfo.src,
                //     dialogVisible:true
                // })
            },
            myPlay(src) {
                this.$nextTick(() => {
                    let dom = document.getElementById('my_video');
                    videojs(dom).src([
                        {
                            src: src,
                            type: 'application/x-mpegURL',
                        },
                    ]);
                    videojs(dom, { autoplay: true }, function () {
                        this.play();
                    });
                });
            },
            handleClose(done) {
                this.videoInfo.src = '';
                this.videoInfo.channelName = '';
                // videojs('my_video').dispose();
                // this.dialogVisible = false;
                this.dialogVisible = false;
                // this.$emit('getCameraInfo', {
                //     src: this.videoInfo.src,
                //     dialogVisible: false,
                //     deviceName: this.videoInfo.channelName,
                // });
                done();
            },
            del(obj) {
                this.$confirm(
                    `此操作将删除该设备点位 (${obj.deviceName}), 是否继续?`,
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        this.$emit('delPointList', obj);
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除',
                        });
                    });
            },
            openDoor(obj) {
                let params = {
                    doorId: obj.deviceId,
                    how: 'open',
                    xqId: this.pointList[0].xqId,
                };
                this.$confirm('确认开门吗？')
                    .then((_) => {
                        handleAkxDoor(params).then((res) => {
                            if (res.data.code == 200) {
                                this.$message({
                                    message: '远程开门成功',
                                    type: 'success',
                                });
                                this.$emit('getListFlag', true);
                            } else {
                                this.$message(res.data.msg);
                            }
                        });
                    })
                    .catch((_) => { });
            },
            closeDoor(obj) {
                let params = {
                    doorId: obj.deviceId,
                    how: 'close',
                    xqId: this.pointList[0].xqId,
                };
                this.$confirm('确认关门吗？')
                    .then((_) => {
                        handleAkxDoor(params).then((res) => {
                            console.log(res);
                            if (res.data.code == 200) {
                                this.$message({
                                    message: '远程开门成功',
                                    type: 'success',
                                });
                                this.$emit('getListFlag', true);
                            } else {
                                this.$message(res.data.msg);
                            }
                        });
                    })
                    .catch((_) => { });
            },
            // 通过类型返回系统
            getSystemName(type) {
                if (type == 1) {
                    return '监控';
                } else if (type == 2) {
                    return '门禁';
                } else if (type == 3) {
                    return '停车场';
                } else if (type == 4 || type == 5) {
                    return '安防报警-公区';
                } else if (type == 6) {
                    return '火灾报警';
                }
            },
            getPointImg() {
                let routePath = this.$route.path.replace('/iot_', '');
                // if (routePath == 'map_device') return;
                // let img = require('../../assets/images/iot_svg/' + routePath + '.svg');
                // this.activeUrl = img;

            },
        },
        mounted() {
            this.getPointImg();

        },
        beforeDestroy() {
            // 
            if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log("关闭定时器");
            }
        },
        directives: {
            drag: {
                bind: function (el, binding, vNode) {

                },
                inserted(el, binding, vNode) {

                },
                update(el, binding, vNode) {
                    // console.log(el, binding, vNode);
                    let domLeft = el.style.left.replace('px', '');
                    let domTop = el.style.top.replace('px', '');
                    // console.log(`点位当前位置${domLeft}px,${domTop}px`);
                    let moved = false;
                    let startX = 0;
                    let startY = 0;
                    let mousedownX = 0;
                    let mousedownY = 0;
                    let domX = binding.value.x;
                    let domY = binding.value.y;

                    let _this = vNode.context;

                    el.onmousedown = function (e) {
                        console.log(binding.value.isUpdate)
                        if (!binding.value.isUpdate) return;
                        console.log(`鼠标按下的位置${e.x}px，${e.y}px`);
                        if(startX != 0 && startY != 0){
                            console.log('1');
                            mousedownX = startX
                            mousedownY = startY
                        }else{
                            mousedownX = e.x;
                            mousedownY = e.y;
                        }
                        document.onmousemove = function (e) {
                            moved = true;
                            let mousemoveX = e.x;
                            let mousemoveY = e.y;
                            console.log(mousemoveX, mousemoveY, "移动到坐标");
                            let moveX = mousemoveX - mousedownX;
                            let moveY = mousemoveY - mousedownY;
                            console.log(`移动了${moveX},${moveY}`);
                            console.log(`上次移动结束坐标${domX},${domY}`);
                            el.style.left = moveX / _this.zoom + domX + 'px';
                            el.style.top = moveY / _this.zoom + domY + 'px';
                            vNode.context.editX = moveX / _this.zoom + domX ;
                            vNode.context.editY = moveY / _this.zoom + domY ;
                            document.onmouseup = function () {
                                startX = mousemoveX;
                                startY = mousemoveY;
                                if(moved) {
                                    domX = moveX / _this.zoom + domX
                                    domY = moveY / _this.zoom + domY
                                    moved = false;
                                }
                                console.log('校准下次移动初始坐标',domX,domY);
                                document.onmousedown = null;
                                document.onmousemove = null;
                            };
                        };
                    };
                },
            },
        },
        components: {
            propertyInfo,
            deviceInfo,
            maintainInfo,
            alarmInfo,
            player,
            iotvscsplayer,
            iotAcsCard,
            iotCisCard,
            iotIpsCard,
            iotacslist,//门禁事件
            iotcislist,
            iotcislist2,
            senselist,
            senselist2,
            // deviceCard,
            iotdmbcard
        }
    };
</script>

<style scoped lang='scss'>
    .shuxing {
        display: flex;
        justify-content: space-around;
    }

    .myTag {
        margin: 0 2px;
        cursor: pointer;
    }

    .pointImg {
        $pw: 100px;
        $ph: 131px;
        border: 0;
        display: inline-block;
        width: $pw;
        height: $ph;
        cursor: pointer;
        background-size: $pw;
    }

    .defaultImg {
        background: url('../../assets/images/iot_svg/fan.svg') no-repeat;
        background-size: 33px;
    }

    /* 设备监控弹窗 */
    .tanchuang /deep/ .el-dialog {
        background: url(../../assets/images/jifang_panel/tanchuang.png) no-repeat;
        background-size: 100% 100%;
        /* background: rgba(20, 20, 20,0.9); */
        color: #ffffff;
        /* min-height: 50%; */
        height: auto;
    }

    .tanchuang /deep/ .el-dialog__title {
        color: #ffffff;
    }

    .tanchuang /deep/ .el-dialog__body {
        padding: 0px 20px 10px 20px;
        color: #ffffff;
    }

    .tabsbox {
        width: 100%;
    }

    .tabsbox /deep/ .el-tabs__item {
        color: #ffffff;
    }

    .tabsbox /deep/ .is-active {
        color: #409EFF;
    }

    .tabsbox /deep/ .el-tabs__active-bar {
        display: none;
    }

    .tabsbox /deep/ .el-tabs__nav-wrap::after {
        display: none;
    }
</style>